<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>采购退货</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_ujijnnny2m.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
		<link rel="stylesheet" href="js/layer/mobile/need/layer.css" />
		<link rel="stylesheet" href="css/dingdan.css" />
		<link rel="stylesheet" href="css/caiStyle.css" />
	</head>
	<body>
		<div class="container-fluid bg-white">
			<!-- 订单列表 -->
			<div class="order order-box">
				<div class="ood-box">
					<!-- 顶部工具条 -->
					<nav class="flex">
						<!-- 默认显示的操作栏 -->
						<div class="dutault-nav width100 flex">
							<div class="heard-left width100 flex">
								<div class="mui-col-xs-1 nav-tab-box padding-0">
									<div class="sle-box"><span class="changeSelectData">深圳仓</span><i class="iconfont icon-xiangxia"></i></div>
									<div onclick="closeMain()" class="show-sle-box">
										<div class="show-sle">
											<ul class="mp00">
												<li class="list-none">全部仓库</li>
												<li class="list-none">深圳仓</li>
												<li class="list-none">上海仓</li>
												<li class="list-none">北京仓</li>
											</ul>
										</div>
									</div>
								</div>
								<div class=" state-tab-box padding-0 mui-col-xs-2">
									<div class="sle-box"><span class="changeSelectData1">已完成</span><i class="iconfont icon-xiangxia"></i></div>
									<div onclick="warehouse()" class="show-sle-state show-sle-state1" >
										<div class="show-sle show-sle2">
											<ul class="mp00">
												<li class="list-none">全部状态</li>
												<li class="list-none">已完成</li>
												<li class="list-none">已作废</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="col-md-5 padding-0">
									<input type="text" class="layui-input cg_secrh" placeholder="请输入订单号/经销商名称" value="" />
										<i class="iconfont icon-search cg_souso"></i>
									<span class="gjss cg_senior" title="点击进行高级搜索">高级搜索</span>
								</div>
							</div>
							<div class="heard-right col-md-4 padding-0 flex">
								<button type="button">导入</button>
								<button type="button"  onclick="window.top.openViewPage('cgth_xzcgth.html')">新增</button>
							</div>
						</div>
						<!-- 选择订单后显示操作栏 -->
						<div class="caozuo-nav hidden flex">
							<div class="nav-item1 C989696">搜索结果</div>
							<div class="nav-item C989696"><i class="iconfont icon-qingchu5 fs22"></i>清除搜索</div>
							<div class="nav-item C989696 gjss" ><i class="iconfont icon-suosou fs18"></i>继续搜索</div>
						</div>
					</nav>
					<!-- 数据列表 -->
					<div class="order-list">
						<table id="order-list" lay-filter="test"></table>
					</div>
				</div>
			</div>
			
			<!-- 新增订单 -->
			<div class="order hidden add-order">
				
			</div>
			
			<!-- 导入订单 -->
			<div class="order hidden import-order">44</div>
			<!-- 高级搜索弹出层 -->
			<div class="advanced-search-model hidden">
				<div class="closeSm"></div>
				<div class="sm-box gs-box">
					<form class="layui-form">
						<div class="gs-box-item">
							<div class="title">高级搜索</div>
							<div class="form-box">
								<div class="col-md-6 padding-0">
									<div class="fb-box"><span class="title">采购单号</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box"><span class="title">商品名称</span><input type="text" class="form-controls" name="" id="" value="" /></div>
										<div class="fb-box"><span class="title">采购员</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								</div>
								<div class="col-md-6 padding-0">
									<div class="fb-box"><span class="title">供应商</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box"><span class="title">日期</span><i class="iconfont icon-riqi crkmx_time"></i><input type="text" class="layui-input form-controls" id="test11" placeholder=" - "></div>
									<div class="fb-box"><span class="title">制单人</span><input type="text" class="form-controls" name="" id="" value="" /></div>

								</div>
								<div class="col-md-12 padding-0">
									<div class="fb-box">
										<span class="title">采购单状态</span>
										<div class="chckebox-list">
											<input type="checkbox" id="c_all" lay-filter="c-all" lay-skin="primary" title="全部">
											<input type="checkbox" class="typev" lay-filter="c-one" lay-skin="primary" value="已入库" title="已入库">
											<input type="checkbox" class="typev" lay-filter="c-one" lay-skin="primary" value="部分入库" title="部分入库">
											<input type="checkbox" class="typev" lay-filter="c-one" lay-skin="primary" value="待入库" title="待入库">
										</div>
									</div>
								</div>
							</div>
						</div>
						
						<div class="footer-buttom">
							<button @click="closegjss" class="closegjss" type="button">取消</button>
							<button type="button">确定</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs " lay-event="edit" id="test2">明细</a>
	  </script>
		<script type="text/javascript">
			$(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-67)+"px"})
			})
			
			$(".nav-tab-box .sle-box").click(function(){
				$(this).next().slideToggle(100)
			})
			
			function closeMain(){
				$(".nav-tab-box .show-sle-box").slideToggle(100)
			}
			
			$(".state-tab-box .sle-box").click(function(){
				$(this).next().slideToggle(100)
			})
			function state(){
				$(".state-tab-box .show-sle-state").slideToggle(100)
			}

			$(".nav-tab-box .show-sle-box .list-none .state-tab-box .show-sle-state").click(function(){
				$(".sle-box .changeSelectData").text($(this).text())
			})
			
			
			$(".nav-tab-box .show-sle-box .list-none").click(function(){
				$(".sle-box .changeSelectData").text($(this).text())
			})
			
				//仓库的子目录显示隐藏
			function warehouse(){
				$(".show-sle-state1").slideToggle(100)
			}
			//获取仓库的子目录的值
			$(".show-sle-state .show-sle2 .list-none").click(function(){
				$(".sle-box .changeSelectData1").text($(this).text())
			})
			
				//显示高级搜索
			$(".gjss").click(function(){
				$(".advanced-search-model").removeClass("hidden")
			})
			function showTabMain(num){
				if(num > 0){
					$(".flex .dutault-nav").addClass("hidden")
					$(".flex .caozuo-nav").removeClass("hidden")
				}else{
					$(".flex .dutault-nav").removeClass("hidden")
					$(".flex .caozuo-nav").addClass("hidden")
				}
				
				$(".changeNum").text(num)
			}
			
			var vm = new Vue({
				el:".gs-box",
				data:{
					base64Url:"",
					showSelcet:false,
					enteWarehouse:false,
				},
				mounted(){
				},
				methods:{
					closegjss(){//隐藏高级搜索
						$(".advanced-search-model").addClass("hidden")
					},
				}
			})
			
			layui.use(['form','table','laydate','element'], function(){
				var table = layui.table,
				laydate = layui.laydate,
				form = layui.form,
				element = layui.element
				
				//时间范围选择
				laydate.render({
					elem: '#test11',
					type: 'datetime',
					range: true,
					value:Gather.getTime().YearText+" - "+Gather.getTime().YearText,
					format:"yyyy-MM-dd HH:mm",
					max:Gather.getTime().value,
					done: function(value, date, endDate){
						console.log(value); //得到日期生成的值，如：2017-08-18
						console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
						console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
					}
				});	
				
				//订单状态选择
				var orderList = [];
				//全选
				form.on('checkbox(c-all)', function(data){
					if(data.elem.checked){
						$(".typev").prop("checked",true)
						var item = $(".typev");
						for (var i = 0; i < item.length; i++) {
							if (item[i].checked == true) {
								orderList.push({
									id:i,
									name:item[i].value
								})
							}
						}
						form.render('checkbox');
					}else{
						$(".typev").prop("checked",false)
						form.render('checkbox');
					}
				}); 
				
				//单选
				form.on('checkbox(c-one)', function (data) {
					var item = $(".typev");
					for (var i = 0; i < item.length; i++) {
						if (item[i].checked == false) {
							$("#c_all").prop("checked", false);
							form.render('checkbox');
							break;
						}
					}
					//如果都勾选了  勾上全选
					var  all=item.length;
					for (var i = 0; i < item.length; i++) {
						if (item[i].checked == true) {
							console.log("2");
							all--;
						}
					}
					if(all==0){$("#c_all").prop("checked", true);form.render('checkbox');}
					
					//单选时取值
					if(data.elem.checked){
						orderList.push({
							id:"0",
							name:data.elem.value
						})
					}else{
						for(let i = 0;i<orderList.length;i++){
							if(orderList[i].name == data.elem.value){
								orderList.splice(i,1)
							}
						}
					}
				});
				//获取列表选中行
				table.on('checkbox()', function(obj){
					var data = table.checkStatus('order-list').data.length;
					showTabMain(data)
				});
					//单元格点击事件跳转页面
				table.on('tool(test)', function(obj){
					//跳转到成本调整明细页面
					if(obj.event == 'remark'){
						window.open('xsthjl.html?data='+obj.data, '_self');
					}
				});
				
				
				// 数据列表渲染
				table.render({
					elem: '#order-list'
					,data:DataArray2// data为数据库查到的数据
					,height: 500
					,cols: [[//以下field字段为为数据库相同,title为字段描述
						{type:'checkbox'}
						,{field:'userid', title: '采购单号'}
						,{field:'pwd', title: '供应商'}
						,{field:'sex',  title: '采购金额'}
						,{field:'rank', title: '制单人 '}
						,{field:'uptime', title: '采购员'}
						,{field:'uptime', title: '时间'}
						,{field:'uptime', title: '状态'}
						,{field:'uptime', title: '备注'}
						
					]]
					,page: true
				});
				
				//监听行单击事件
				table.on('row(test)', function(obj){
				  console.log(obj.tr) //得到当前行元素对象
				  console.log(obj.data) //得到当前行数据
				  //obj.del(); //删除当前行
				  //obj.update(fields) //修改当前行数据
//				  window.open('ddxq.html?data='+obj.data, '_self');
				});
			});
			
			
		</script>
	</body>
</html>
